<template>
	<view class="content poRel">
		<view style="height: 30rpx;"></view>
		<view class="wid90 mar">
			<view class="fowe800 foSi30">订单编号</view>
			<view class="mar-top30 borRad10 dis disAl disJuC" style="background-color: #EEEEEE;height: 96rpx;">
				<input class="foSi30 wid90" v-model="number" placeholder="请输入订单编号" placeholder-style="color: #5B5B5B;"/>
			</view>
			<view class="fowe800 foSi30 mar-top30">反馈内容</view>
			<view class="mar-top30 borRad10" style="background-color: #EEEEEE;padding: 30rpx 0;">
				<textarea class="wid90 mar foSi30" :maxlength="1000" v-model="text" 
					style="height: 200rpx;" placeholder-style="color: #5B5B5B" placeholder="请详细描述遇到的问题"/>
				<view class="wid90 mar foSi25 mar-top15" style="text-align: right;color: #5B5B5B;">{{text.length}}/1000</view>
			</view>
			<view class="dis disAl flwa" >
				<block v-for="(item,index) in imageList" :key="index">
					<view class="borRad20 mar-top30 poRel" :class="index != 2?'mar-right30':''"
						style="width: 200rpx;height: 200rpx;overflow: hidden;">
						<view @click="shanchu(index)" class="poAbs" style="right: 0;top: 0;z-index: 5;">
							<uni-icons type="closeempty" class="close" size="20"></uni-icons>
						</view>
						<image :src="url+item" class="wh100"></image>
					</view>
				</block>
				<view class="borRad20 mar-top30" :class="imageList.length != 2?'mar-right30':''"
					v-if="imageList.length < 3" @click="shangImage"
					style="width: 200rpx;height: 200rpx;background-color: #F2F2F2;">
					<view style="height: 55rpx;"></view>
					<view class="mar" style="width: 58rpx;height: 48rpx;">
						<image src="../../static/shangchuan.png" class="wh100"></image>
					</view>
					<view class="foSi20 mar-top20 textCen" style="color: #989797;">
						<view>上传图片</view>
						<view>{{imageList.length}}/3</view>
					</view>
				</view>
				<view v-if="!video" class="borRad20 mar-top30" @click="shangVideo"
					style="width: 200rpx;height: 200rpx;background-color: #F2F2F2;">
					<view style="height: 55rpx;"></view>
					<view class="mar" style="width: 58rpx;height: 48rpx;">
						<image src="../../static/shangchuan.png" class="wh100"></image>
					</view>
					<view class="foSi20 mar-top20 textCen" style="color: #989797;">上传视频</view>
				</view>
				<view v-if="video" class="borRad20 mar-top30 poRel"
					style="width: 200rpx;height: 200rpx;overflow: hidden;">
					<video :src="url+video" class="wh100"></video>
				</view>
			</view>
			<view class="mar-top30 foSi25" style="color: #989797;">*最多只能上传3张图片、1个视频（30M以内）</view>
		</view>
		<view style="height: 140rpx;"></view>
		<view class="poFix wid100 bacFFF dis disAl disJuC" style="height: 120rpx;bottom: 0;">
			<!-- <view class="dis disAl disJuB wid90 mar hei100">
				<view class="hei86 dis disAl disJuC borRad40 foSi30 fowe600" style="width: 300rpx;border: 2rpx solid #BFBFBF;">反馈记录</view>
				<view class="hei86 dis disAl disJuC borRad40 coFFF foSi30 fowe600" @click="fankui"
					style="width: 300rpx;background: #00C82D;">提交反馈</view>
			</view> -->
			<view class="wid90 mar hei100 dis disAl">
				<view class="hei86 dis disAl disJuC borRad40 coFFF foSi30 fowe600 wid100" @click="fankui"
				 :style="'background-color: '+theme.main_color+';'">提交申诉</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				number: '',
				text: '',
				imageList: [],
				source: '',
				video: '',
				theme: null
			}
		},
		onLoad(option) {
			this.theme = uni.getStorageSync('theme')
		},
		methods: {
			fankui(){
				var that = this;
				if(!that.text){return uni.showToast({title: '请输入问题',icon: 'error',duration: 2000}) }
				if(!that.number){return uni.showToast({title: '请输入订单编号',icon: 'error',duration: 2000}) }
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/feedback/apply_info',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						order_id: that.number,
						content: that.text,
						imglist: that.source,
						videos: that.video
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							uni.navigateBack(1)
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
				
			},
			shanchu(index){
				console.log(index)
				this.imageList.splice(index, 1);
			},
			//上传图片
			shangImage(){
				var that = this
				
				// #ifdef APP
				var xiangce = 0;
				var xiangji = 0;
				const permission = 'android.permission.WRITE_EXTERNAL_STORAGE'; // 要检查的权限
				const android_camera = 'android.permission.CAMERA';
				plus.android.checkPermission(
				  permission,
				  granted => {
					  console.log(granted);
					if (granted.checkResult == '-1') {
					  console.log('相册未授权');
					  xiangce = 1;
					}
				  },
				  error => {
					console.error('Error checking permission:', error.message);
				  }
				);
				plus.android.checkPermission(
					android_camera,
					granted => {
						console.log(granted);
						if (granted.checkResult == '-1') {
						  console.log('相机未授权');
						  xiangji = 1;
						}
					},
					error => {
						console.error('Error checking permission:', error.message);
					}
				);
				setTimeout(function(){
					console.log(xiangce);
					console.log(xiangji);
					if(xiangce == 1 && xiangji == 1){
						uni.showModal({
							title: '提示',
							content: that.global.name+'对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
							success: function (res) {
								if (res.confirm) {
									that.picopsshow = true;
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						})
					}else if(xiangce == 1 && xiangji == 0){
						uni.showModal({
							title: '提示',
							content: that.global.name+'对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
							success: function (res) {
								if (res.confirm) {
									that.picopsshow = true;
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						})
					}else if(xiangce == 0 && xiangji == 1){
						uni.showModal({
							title: '提示',
							content: that.global.name+'对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
							success: function (res) {
								if (res.confirm) {
									that.picopsshow = true;
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						})
					}else{
						that.picopsshow = true;
					}
				},100)
				// #endif
				var count = 3 - that.imageList.length
				uni.chooseImage({
					count: count,
					success:(res)=>{
						// that.imageList = that.imageList.concat(res.tempFilePaths);
						for (var i=0; i<res.tempFilePaths.length; i++) {
							that.shangchuan(res.tempFilePaths[i],0)
						}
					},
				})
			},
			//上传视频
			shangVideo(){
				var that = this
				uni.chooseVideo({
					count: 1, //选择多少个视频
					sourceType: ['album', 'camera'], //视频来源相册和相机都可以
					maxDuration: 60,
					camera: 'back', //默认摄像头是后置摄像头
					success:(res)=>{
						// that.video = res.tempFilePath;
						that.shangchuan(res.tempFilePath,1)
					},
				})
			},
			shangchuan(tempFilePaths,i){
				var that = this
				uni.uploadFile({
					url: that.global.url + 'api/qianyu_smfw/common/file_upload',
					header: {
						'site-id': that.global.site_id,
						"token": uni.getStorageSync('token'),
					}, //请求token	
					filePath: tempFilePaths,
					name: 'file',
					success: (res) => {
						var apiresult = JSON.parse(res.data)
						if (apiresult.code == 1) {
							console.log(apiresult.data);
							if(i == 0){
								if(that.imageList.length == 0){
									that.source = apiresult.data
								}else{
									that.source += ','+apiresult.data
								}
								that.imageList = that.imageList.concat(apiresult.data);
							}else{
								that.video = apiresult.data;
							}
						} else {
							uni.showToast({
								title: apiresult.msg,
								icon:'error',
								duration: 2000
							})
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon:'error',
							duration: 2000
						})
					}
				});
			},
			open() {
				this.visible = true
			},
			confirm(val) {
				console.log(val)
				this.visible = false
				this.provincial = val.name
				this.$forceUpdate()
			},
			cancel() {
				this.visible = false
				this.$forceUpdate()
				console.log(this.visible)
			},
			shuanchu(index){
				this.list.splice(index, 1);
			},
			xuanClick(item){
				if(this.xuan != item.id){
					this.xuan = item.id
				}
			},
			lower(e) {
				if(this.last_page > this.page){
					this.page++
					this.getList()
				}
			},
			getList(){
				
			},
			fanhui(){
				uni.navigateBack(1)
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
	}
</style>